<script lang="ts" setup>
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  duration: {
    type: Number,
    default: 0
  },
  cover: {
    type: String,
    default: ''
  },
  checked: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:checked'])
</script>

<template>
  <el-card shadow="hover" :body-style="{ padding: '0' }">
    <div class="relative w-full h-25 bg-cover" :style="{ backgroundImage: `url(${props.cover})` }">
      <el-checkbox
        class="absolute top-0 left-2"
        :model-value="props.checked"
        @update:model-value="(newVal) => emit('update:checked', newVal)"
      />
      <span class="absolute right-3 bottom-2">{{ props.duration }}</span>
    </div>
    <div class="p-2">
      <span>{{ props.title }}</span>
    </div>
  </el-card>
</template>
